<!--<app-form [widgets]="widgets" (onCancel)="_handleCancel($event)" (onConfirm)="_submitForm($event)"></app-form>-->
<div class="form-wrap">
  <form nz-form [formGroup]="validateForm" [nzType]="'horizontal'">
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6">
        <label for="kind" nz-form-item-required>职位</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('kind')" nzHasFeedback>
        <nz-select [nzPlaceHolder]="'选择职位类别'" nzAllowClear [nzSize]="'large'" formControlName="kind"
                   [(ngModel)]="formData.kind">
          <nz-option
            *ngFor="let option of kindList"
            [nzLabel]="option.kindName"
            [nzValue]="option.qkid"
            [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>
        <div nz-form-explain
             *ngIf="getFormControl('kind').dirty&&getFormControl('kind').hasError('required')">
          职位必选!
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6">
        <label for="type" nz-form-item-required>问题类别</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('type')" nzHasFeedback>
        <nz-select [nzPlaceHolder]="'选择问题类别'" nzAllowClear [nzSize]="'large'" formControlName="type"
                   [(ngModel)]="formData.type"  (ngModelChange)="questionTypeChange($event)">
          <nz-option
            *ngFor="let option of typeList"
            [nzLabel]="option.label"
            [nzValue]="option.value"
            [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>
        <div nz-form-explain
             *ngIf="getFormControl('type').dirty&&getFormControl('type').hasError('required')">
          为题类别必选!
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6">
        <label for="level" nz-form-item-required>难度</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('level')" nzHasFeedback>
        <nz-select [nzPlaceHolder]="'选择职位类别'" nzAllowClear [nzSize]="'large'" formControlName="level"
                   [(ngModel)]="formData.level">
          <nz-option
            *ngFor="let option of levelList"
            [nzLabel]="option.label"
            [nzValue]="option.value"
            [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>
        <div nz-form-explain
             *ngIf="getFormControl('level').dirty&&getFormControl('level').hasError('required')">
          为题类别必选!
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6">
        <label for="description" nz-form-item-required>描述</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('description')" nzHasFeedback>
        <umeditor  formControlName="description"
                  [(ngModel)]="formData.description" [config]="config"></umeditor>
        <!--<nz-input [nzSize]="'large'" formControlName="description" [nzId]="'description'"
                  [(ngModel)]="formData.description"></nz-input>-->
        <div nz-form-explain
             *ngIf="getFormControl('description').dirty&&getFormControl('description').hasError('required')">
          题目描述必填!
        </div>
      </div>
    </div>


    <div nz-form-item nz-row *ngFor="let control of formData.options;let i = index" >
      <div nz-form-label nz-col [nzSm]="6" *ngIf="i==0" >
        <label for="options" nz-form-item-required>选项</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzOffset]="i==0?0:4" [nzValidateStatus]="getFormControl(control.value)">
        {{ answerList[i] }}：<nz-input
          style="width: 60%; margin-right:8px;"
          [nzSize]="'large'"
          [nzPlaceHolder]="'placeholder'"
          [formControlName]="control.value"
          [(ngModel)]="control.value"
          [nzId]="control.key">
        </nz-input>
        <i class="anticon anticon-minus-circle-o dynamic-delete-button" (click)="removeField(control,$event)"></i>
        <div nz-form-explain
             *ngIf="getFormControl(control.value)?.dirty&&getFormControl(control.value)?.hasError('required')">
          Please input passenger's name or delete this field.
        </div>
      </div>
    </div>
    <div nz-form-item nz-row  *ngIf="showStatus">
      <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
        <button nz-button [nzType]="'dashed'" [nzSize]="'large'" style="width:60%" (click)="addField($event)">
          <i class="anticon anticon-plus"></i>
          <span> Add field</span>
        </button>
      </div>
    </div>


    <div nz-form-item nz-row *ngIf="showStatus">
      <div nz-form-label nz-col [nzSm]="6">
        <label for="answer" nz-form-item-required>答案</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14"
           [nzValidateStatus]="getFormControl('answer')" nzHasFeedback>
        <nz-select [nzPlaceHolder]="'选择答案'"  [nzSize]="'large'" formControlName="answer"  [nzMode]="'multiple'"
                   [(ngModel)]="formData.answer">
          <nz-option
            *ngFor="let option of chooseAnswer"
            [nzLabel]="option.label"
            [nzValue]="option.value"
            [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>
        <!--<nz-select style="width: 400px;"
                   [(nzMode)]="'multiple'"
                   [nzPlaceHolder]="'请选择答案'"
                   [(ngModel)]="formData.answer"
                   [nzNotFoundContent]="'无法找到'">
          <nz-option
            *ngFor="let option of chooseAnswer"
            [nzLabel]="option.label"
            [nzValue]="option.value"
            [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>-->
        <!--<nz-input [nzSize]="'large'" formControlName="answer" [nzId]="'answer'"
                  [(ngModel)]="formData.answer"></nz-input>-->
        <div nz-form-explain
             *ngIf="getFormControl('answer').dirty&&getFormControl('answer').hasError('answer')">Please
          答案是必填项!
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="6">
        <label for="score" nz-form-item-required>分数</label>
      </div>
      <div nz-form-control nz-col [nzSm]="14" [nzValidateStatus]="getFormControl('score')" nzHasFeedback>
        <nz-input-number [(ngModel)]="formData.score" formControlName="score" [nzMin]="0" [nzMax]="100" ></nz-input-number>
        <div nz-form-explain
             *ngIf="getFormControl('score').dirty&&getFormControl('score').hasError('required')">
          分数必填！
        </div>
      </div>
    </div>

     <div nz-form-item nz-row style="margin-bottom:8px;">
       <div class="customize-footer">
         <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="_cancel()">
           返 回
         </button>
         <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="_submitForm()">
           确定
         </button>
       </div>
     </div>
  </form>
</div>
